<template>
    <div class="box">
        <!-- 进度条 -->
         <div>
            <progressView :index="2"></progressView>
         </div>
         <!-- 标题 -->
          <div class="title">
            <h2>
                {{ data.title }}
            </h2>
            <el-button type="primary" @click="handlePPT"> 
                <div>
                    <img width="14px" style="margin-right: 5px;" src="../../assets/images/fasong.png" alt="">
                    <span>生成教学PPT</span>
                </div>
            </el-button>
          </div>
          <!-- 内容  -->
          <div class="content">
            <h2>课程目标</h2>
            <div class="list">
                <div class="item" v-for="(item,index) in data.targets" :key="item.id">
                    <p>{{ index+1 }}</p>

                    <el-input v-if="setId == item.id" v-model="textarea" style="width:100%" :row="2" type="textarea" placehodler="Please input"/>
                    <span v-else>{{ item.content }}</span>
                    <el-button v-if="setId != item.id" @click="handleEdit(item.id)" text type="primary">编辑</el-button>
                    <div v-if="setId==item.id">
                        <el-button @click="handleSave(item.id)" style="margin-bottom: 10px;" type="primary">保存</el-button><br>
                        <el-button @click="handleCancel()" text type="primary">取消</el-button>
                    </div>
                    <img @click="handleDelete(item.id)" class="delete" style="margin-left: 10px;" src="../../assets/images/guanbi.png" alt="">
                </div>
            </div>
          </div>
    </div>
</template>
<script setup>
import { callDeepSeekAPI } from '@/api/deepseekApi';
import { useCounterStore } from '@/stores/counter';
import { useRouter } from 'vue-router';
const router = useRouter();
import { onMounted,ref } from 'vue';
const store = useCounterStore();
const textarea = ref('');

const data = ref({});
const setId = ref(-1);


const handleEdit = (id) => {
    setId.value = id;
    textarea.value = data.value.targets.find(item => item.id == id).content;
}
const handleSave = (id) => {
    data.value.targets.find(item => item.id == id).content = textarea.value;
    setId.value = -1;
    textarea.value = '';
}
const handleCancel = () => {
    setId.value = -1;
    textarea.value = '';
}
const handleDelete = (id) => {
    data.value.targets = data.value.targets.filter(item => item.id != id);
}

const handlePPT = ()=>{
    //设置提示词
    let prompt = `
请根据提供的markdown执行以下任务：

解析文档内容：提取markdown中的所有标题、章节、段落、列表、案例代码块（文本示例，不要出现“案例”）和代码块。确保内容完整无遗漏。
生成PPT大纲：基于解析内容创建结构化大纲，包括：
主标题（文档主题）
子章节（e.g., 引言、主体、结论）
关键点（每个章节的要点列表）
案例和代码的位置标记（直接生成代码，代码区域不能出现滚动条）
生成HTML格式PPT：使用大纲和文档内容，以reveal.js库（或类似）生成HTML PPT。要求：
内容准确：PPT必须忠实反映文档原意(不要出现笔记字样)。
排版美观：应用CSS行内样式（e.g., 字体：Arial, 字号：正文14px；标题24px；边距：20px；背景色：浅灰；文字颜色：深蓝）。
页面区分：每页用不同背景色边框（e.g., 1px solid #ddd）或标题栏区分。
案例处理：案例换行使用<br>标签；若案例过长导致页面溢出，自动缩小字号至最小12px。
代码处理：代码块用<pre>标签包裹，换行使用<br>；若代码过长，优先缩小字号至最小10px；或分页显示。
页面内容：尽量多点内容，每个知识点都要有案例，内容不可溢出页面，不可出现滚动条
输出格式：最终PPT为单一HTML文件，包含完整CSS样式，不需要有任何的交互，可直接在浏览器中打开。
错误处理：若文档为空或无法解析，返回错误消息。
直接返回HTML格式PPT，除了HTML代码，不要任何其他东西。markdown：${JSON.stringify(data.value) || ''}`
    callDeepSeekAPI([
        { role: "system", content: prompt },
        { role: "user", content: JSON.stringify(data.value) }
    ],'deepseek-chat',false).then(res => {
        console.log(res);
      
         localStorage.setItem('contentPPT',res.choices[0].message.content)
            // store.PPTData = JSON.parse(localStorage.getItem('contentPPT'));
            console.log(localStorage.getItem('contentPPT'));
            
        router.push({
            path:'/AlissonsViewPPT'
        });
    })
}

onMounted(()=>{
    data.value = JSON.parse(localStorage.getItem('content'))
})
</script>

<style scoped>
.title{
    width: 100%;
    height: 185px;
    background-color: #fff;
    margin-top: 44px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}
.content{
    width: 100%;
    background-color: #fff;
    margin-top: 50px;
    border-radius: 10px;
}
.list{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.item{
    box-sizing: border-box;
    width: 98%;
    height: 100px;
    border: 3px solid #ebebeb;
    margin: 10px 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    position: relative;
}
.item p{
    margin: 0 20px 0 0; 
    padding: 0;
    color: #acc6fd;
    font-size: 48px;
}
.delete{
    width: 20px;
    right: 20px;
    top: 20px;
    position: absolute;
}
</style>